<template>
  <div class="user_info">
    <div class="btnS">
      <el-button
        v-for="item in btn_list"
        :key="item.index"
        :disabled="item.disabled"
        :icon="item.icon"
        style="border: none"
        @click="top_btns(item)"
        >{{ item.name }}</el-button
      >
    </div>
    <div class="main">
      <div class="user">
        <p>
          <span style="font-weight: 900; font-size: 24px; color: #000">{{
            info.residentName
          }}</span>
          <span style="display: inline-block; margin-left: 10px">{{
            info.idCard
          }}</span>
          <el-tag type="success" size="small" style="margin-left: 15px"
            >正常</el-tag
          >
          <!-- <el-tag size="small" style="margin-left: 15px">未签约</el-tag> -->
        </p>
        <table class="tab_sty" cellspacing="0" style="width: 100%">
          <tr class="no_bdb">
            <th>性别</th>
            <td>{{ info.gender | six }}</td>
            <th>出生日期</th>
            <td>{{ info.dataBirth | time }}</td>
            <th>责任单位</th>
            <td style="width: 56%">
              <!-- <el-tag type="warning" size="small">普通居民</el-tag> -->
              {{ info.dutyUnitName }}
            </td>
          </tr>
          <tr class="">
            <th>建档时间</th>
            <td>{{ info.fillDate | fillDate }}</td>
            <th>责任医生</th>
            <td>{{ info.dutyUserName }}</td>
            <th>慢病标签</th>
            <td style="width: 24%">
              <span v-if="info.chronicType">
                <el-tag
                  type="warning"
                  style="margin-right: 5px"
                  size="small"
                  v-for="(item, index) in info.chronicType.split(',')"
                  :key="index"
                >
                  {{ item }}</el-tag
                >
              </span>

              <span v-else>-</span>
            </td>
            <th>高危标签</th>
            <td style="width: 24%">
              <span v-if="info.riskType">
                <el-tag
                  type="warning"
                  style="margin-right: 5px"
                  size="small"
                  v-for="(item, index) in info.riskType.split(',')"
                  :key="index"
                >
                  {{ item }}</el-tag
                >
              </span>

              <span v-else>-</span>
            </td>
          </tr>
          <tr v-if="false">
            <th>责任单位</th>
            <td style="width: calc(28%)">{{ info.dutyUnitName }}</td>
            <th>慢病标签</th>
            <td style="width: 56%">
              <!-- <el-tag type="success" size="small">一般人</el-tag> -->
              {{ info.chronicType }}
            </td>
          </tr>
        </table>
      </div>
      <div class="tab">
        <div>
          <el-button
            v-for="item in new_btns"
            :key="item.index"
            :class="item.index == isTab_Now ? 'btnY' : 'btnN'"
            @click="isTab_Now = item.index"
            >{{ item.name }}</el-button
          >
        </div>
        <div
          class="box"
          name="慢病档案"
          v-if="isTab_Now == 1"
          style="width: 70%"
        >
          <jmjkdafm></jmjkdafm>
        </div>
        <!-- <div
          class="box"
          name="居民健康档案封面"
          v-if="isTab_Now == 2"
          style="width: 70%"
        >
          <grjbxx></grjbxx>
        </div> -->
        <div
          class="box"
          name="体检表"
          v-if="isTab_Now == 9"
          style="width: 100%"
        >
          <tjb></tjb>
        </div>
        <div
          class="box"
          name="健康教育"
          v-if="isTab_Now == 10"
          style="width: 100%"
        >
          <jkjy></jkjy>
        </div>
        <!-- <div
          class="box"
          name="肺结核可疑症状筛查"
          v-if="isTab_Now == 6"
          style="width: 100%"
        >
          <fjh></fjh>
        </div> -->
        <div
          class="box"
          name="报卡记录"
          v-if="isTab_Now == 2"
          style="width: 100%"
        >
          <bkjl></bkjl>
        </div>
        <!-- <div
          class="box"
          name="检验检查记录"
          v-if="isTab_Now == 8"
          style="width: 100%"
        >
          <jcjyjl></jcjyjl>
        </div> -->
        <!-- <div
          class="box"
          name="0～6 岁儿童"
          v-if="isTab_Now == 9"
          style="width: 100%"
        >
          <et_0_6></et_0_6>
        </div> -->
        <!-- <div
          class="box"
          name="孕产妇"
          v-if="isTab_Now == 10"
          style="width: 100%"
        >
          <ycf></ycf>
        </div> -->
        <!-- <div
          class="box"
          name="65岁及以上老年人"
          v-if="isTab_Now == 11"
          style="width: 100%"
        >
          <lnr></lnr>
        </div> -->
        <div
          class="box"
          name="高血压"
          v-if="isTab_Now == 3"
          style="width: 100%"
        >
          <gxy></gxy>
        </div>
        <div
          class="box"
          name="糖尿病"
          v-if="isTab_Now == 4"
          style="width: 100%"
        >
          <tnb></tnb>
        </div>
        <div
          class="box"
          name="冠心病"
          v-if="isTab_Now == 5"
          style="width: 100%"
        >
          <gxb></gxb>
        </div>
        <div
          class="box"
          name="慢阻肺"
          v-if="isTab_Now == 6"
          style="width: 100%"
        >
          <mzf></mzf>
        </div>
        <div
          class="box"
          name="脑卒中"
          v-if="isTab_Now == 7"
          style="width: 100%"
        >
          <ncz></ncz>
        </div>
        <div
          class="box"
          name="慢性肾脏病"
          v-if="isTab_Now == 8"
          style="width: 100%"
        >
          <mxszb></mxszb>
        </div>
        <div class="box" name="肿瘤" v-if="isTab_Now == 11" style="width: 100%">
          <zl></zl>
        </div>
        <!-- <div
          class="box"
          name="严重精神障碍患者"
          v-if="isTab_Now == 14"
          style="width: 100%"
        >
          <jsb></jsb>
        </div> -->
        <!-- <div
          class="box"
          name="肺结核患者"
          v-if="isTab_Now == 15"
          style="width: 100%"
        >
          <fjhhz></fjhhz>
        </div> -->
      </div>
    </div>
    <div class="dialog">
      <el-drawer
        :title="dialog_title"
        :visible.sync="drawer"
        direction="rtl"
        :before-close="handleClose"
        :append-to-body="true"
        size="45%"
      >
        <jmzjxx v-if="dialog_title == '维护居民证件信息'"></jmzjxx>
        <xgrqbq
          @passfunction="init_dialog_title"
          v-if="dialog_title == '修改人群和标签'"
        ></xgrqbq>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import jmjkdafm from "@/views/tab_info/jmjkdafm.vue"; // 慢病档案
import grjbxx from "@/views/tab_info/grjbxx.vue"; // 个人基本信息表
import jkdaxx from "@/views/tab_info/jkdaxx.vue"; // 居民健康档案信息卡
import xgym from "@/views/tab_info/xgym.vue"; // 新冠疫苗接种记录
import myghym from "@/views/tab_info/myghym.vue"; // 国家免疫规划疫苗接种记录
import tjb from "@/views/tab_info/tjb.vue"; // 体检表
import jkjy from "@/views/tab_info/jkjy.vue"; // 健康教育
import fjh from "@/views/tab_info/fjh.vue"; // 肺结核可疑症状筛查
import bkjl from "@/views/tab_info/bkjl.vue"; // 报卡记录
import jcjyjl from "@/views/tab_info/jcjyjl.vue"; // 检验检查记录
import et_0_6 from "@/views/tab_info/et_0_6.vue"; // 0～6 岁儿童
import ycf from "@/views/tab_info/ycf.vue"; // 孕产妇
import lnr from "@/views/tab_info/lnr.vue"; // 65岁及以上老年人
import gxy from "@/views/tab_info/gxy.vue"; // 高血压患者
import tnb from "@/views/tab_info/tnb.vue"; // 2型糖尿病患者
import jsb from "@/views/tab_info/jsb.vue"; // 严重精神障碍患者
import fjhhz from "@/views/tab_info/fjhhz.vue"; // 肺结核患者
import gxb from "@/views/tab_info/gxb.vue"; // 冠心病
import ncz from "@/views/tab_info/ncz.vue"; // 脑卒中
import mzf from "@/views/tab_info/mzf.vue"; // 慢阻肺
import mxszb from "@/views/tab_info/mxszb.vue"; // 慢性肾脏病
import zl from "@/views/tab_info/zl.vue"; // 肿瘤

// 侧边弹层表单
import jmzjxx from "@/views/dia_rig/jmzjxx.vue"; // 维护居民证件信息
import xgrqbq from "@/views/dia_rig/xgrqbq.vue"; // 修改人群及标签

export default {
  components: {
    jmjkdafm,
    grjbxx,
    jkdaxx,
    xgym,
    myghym,
    tjb,
    jkjy,
    fjh,
    bkjl,
    jcjyjl,
    et_0_6,
    ycf,
    lnr,
    gxy,
    tnb,
    jsb,
    fjhhz,
    jmzjxx,
    xgrqbq,
    gxb,
    ncz,
    mzf,
    mxszb,
    zl,
  },
  data() {
    return {
      btn_list: [
        {
          index: 1,
          name: "新建档案",
          icon: "el-icon-plus",
          disabled: false,
        },
        // {
        //   index: 2,
        //   name: "新增失访",
        //   icon: "el-icon-plus",
        //   disabled: true,
        // },
        // {
        //   index: 3,
        //   name: "新增归档",
        //   icon: "el-icon-plus",
        //   disabled: true,
        // },
        // {
        //   index: 4,
        //   name: "迁出档案",
        //   icon: "el-icon-s-custom",
        //   disabled: true,
        // },
        {
          index: 5,
          name: "维护证件信息",
          icon: "el-icon-edit-outline",
          disabled: false,
        },
        {
          index: 6,
          name: "修改人群和标签",
          icon: "el-icon-edit",
          disabled: false,
        },
        {
          index: 7,
          name: "新增报卡",
          icon: "el-icon-document-add",
          disabled: false,
        },
      ],
      tab_btns: [
        {
          index: 1,
          name: "慢病档案",
        },
        {
          index: 2,
          name: "报卡记录",
        },
        {
          index: 3,
          name: "高血压",
        },
        {
          index: 4,
          name: "糖尿病",
        },
        {
          index: 5,
          name: "冠心病",
        },
        {
          index: 6,
          name: "慢阻肺",
        },
        {
          index: 7,
          name: "脑卒中",
        },
        {
          index: 8,
          name: "慢性肾脏病",
        },
        {
          index: 9,
          name: "体检表",
        },
        {
          index: 10,
          name: "健康教育",
        },
        {
          index: 11,
          name: "肿瘤",
        },
      ],
      new_btns: [
        {
          index: 1,
          name: "慢病档案",
        },
        {
          index: 2,
          name: "个人基本信息表",
        },
        {
          index: 3,
          name: "居民健康档案信息卡",
        },
        {
          index: 4,
          name: "体检表",
        },
        {
          index: 5,
          name: "健康教育",
        },
        {
          index: 6,
          name: "肺结核可疑症状筛查",
        },
        {
          index: 7,
          name: "报卡记录",
        },
        {
          index: 8,
          name: "检验检查记录",
        },
      ],
      isTab_Now: 0,
      dialog_title: "", // 弹层title
      drawer: false, // 弹层开关
      info: {},
    };
  },
  mounted() {
    this.isTab_Now = 1;
    if (this.$route.query.idCard) {
      window.localStorage.setItem("idCard", this.$route.query.idCard);
      this.getdata();
    }
    if (this.$route.query.ldCard) {
      window.localStorage.setItem("idCard", this.$route.query.ldCard);
      this.getdata();
    }
    if (this.$route.query.IdCard) {
      window.localStorage.setItem("idCard", this.$route.query.IdCard);
      this.getdata();
    }
  },
  methods: {
    top_btns(obj) {
      if (obj.name == "新建档案") {
        this.$router.push("/carte_da");
      }
      if (obj.name == "维护证件信息") {
        this.dialog_title = "维护居民证件信息";
        this.drawer = true;
      }
      if (obj.name == "修改人群和标签") {
        this.dialog_title = "修改人群和标签";
        this.drawer = true;
      }
      if (obj.name == "新增报卡") {
        this.$router.push("/BKXT/add/addCard?idCard=" + this.info.idCard);
      }
    },
    handleClose() {
      this.drawer = false;
      this.dialog_title = "";
    },
    getdata() {
      var data = {
        idNo: localStorage.getItem("idCard"),
      };
      this.$post("/resident/list?idNo=" + data.idNo).then((res) => {
        if (res.data.length < 1) {
          this.$router.push("/carte_da");
        }
        this.info = res.data[0];
        this.info.chronicType[this.info.chronicType.length - 1] == ","
          ? (this.info.chronicType = this.info.chronicType.substring(
              0,
              this.info.chronicType.lastIndexOf(",")
            ))
          : (this.info.chronicType = this.info.chronicType);

        this.info.riskType[this.info.riskType.length - 1] == ","
          ? (this.info.riskType = this.info.riskType.substring(
              0,
              this.info.riskType.lastIndexOf(",")
            ))
          : (this.info.riskType = this.info.riskType);
        this.set_btns();
      });
    },
    init_dialog_title(val) {
      this.handleClose();
      this.getdata();
      this.$message({
        message: "操作成功！",
        type: "success",
      });
    },
    set_btns() {
      this.init_new_btns();
      var list = this.info.chronicType.split(",");
      var list = this.info.riskType.split(",");
      var old_btns = this.tab_btns;
      for (var j in old_btns) {
        for (var i in list) {
          if (old_btns[j].name == list[i]) {
            this.new_btns.push(old_btns[j]);
          }
        }
      }
      // this.new_btns.push(new_btns)
    },
    init_new_btns() {
      this.new_btns = [
        {
          index: 1,
          name: "慢病档案",
        },
        {
          index: 2,
          name: "报卡记录",
        },
        {
          index: 9,
          name: "体检表",
        },
        {
          index: 10,
          name: "健康教育",
        },
      ];
    },
  },
  filters: {
    six(val) {
      var six = "";
      if (val == 1) {
        six = "男";
        return six;
      }
      if (val == 2) {
        six = "女";
        return six;
      } else {
        six = "未知";
        return six;
      }
    },
    status_to(val) {
      var status_to = "";
      if (val == 0) {
        status_to = "正常";
        return status_to;
      }
      if (val == 1) {
        status_to = "归档";
        return status_to;
      }
    },
    groupType_to_mb(val) {
      if (!val) {
        return "-";
      }
      var array = val.split(",");
      var str = [
        {
          id: 1,
          name: "脑血管病",
        },
        {
          id: 2,
          name: "冠心病",
        },
        {
          id: 3,
          name: "慢阻肺",
        },
        {
          id: 4,
          name: "类风湿关节炎",
        },
        {
          id: 5,
          name: "骨关节炎",
        },
        {
          id: 6,
          name: "重型老年慢性支气管炎",
        },
        {
          id: 7,
          name: "高血压",
        },
        {
          id: 8,
          name: "糖尿病",
        },
        {
          id: 9,
          name: "脑卒中",
        },
        {
          id: 10,
          name: "肿瘤",
        },
        {
          id: 11,
          name: "其他",
        },
      ];
      var newArry = [];
      for (var i in array) {
        for (var j in str) {
          if (array[i] == str[j].id) {
            newArry.push(str[j].name);
          }
        }
      }
      return newArry.toString();
    },
    groupType_to_rq(val) {
      if (!val) {
        return "-";
      }
      var array = val.split(",");
      var str = [
        {
          id: 1,
          name: "普通居民",
        },
        {
          id: 2,
          name: "0-6岁儿童",
        },
        {
          id: 4,
          name: "孕产妇",
        },
        {
          id: 8,
          name: "65岁及以上老年人",
        },
        {
          id: 16,
          name: "高血压患者",
        },
        {
          id: 32,
          name: "2型糖尿病患者",
        },
        {
          id: 64,
          name: "严重精神障碍患者",
        },
        {
          id: 128,
          name: "肺结核患者",
        },
      ];
      var newArry = [];
      for (var i in array) {
        for (var j in str) {
          if (array[i] == str[j].id) {
            newArry.push(str[j].name);
          }
        }
      }
      return newArry.toString();
    },
    groupType_to_jm(val) {
      if (!val) {
        return "-";
      }
      var array = val.split(",");
      var str = [
        {
          id: 1,
          name: "一般人",
        },
        {
          id: 2,
          name: "残疾人",
        },
        {
          id: 3,
          name: "计划生育特殊家庭成员",
        },
        {
          id: 4,
          name: "城市低保",
        },
        {
          id: 5,
          name: "建档立卡贫困人员",
        },
        {
          id: 6,
          name: "五保户",
        },
        {
          id: 7,
          name: "边缘易致贫户",
        },
        {
          id: 8,
          name: "突发严重困难户",
        },
        {
          id: 9,
          name: "脱贫不稳定户",
        },
        {
          id: 10,
          name: "农村特困",
        },
        {
          id: 11,
          name: "困难产业工人",
        },
        {
          id: 12,
          name: "城市特困",
        },
        {
          id: 13,
          name: "农村低保",
        },
      ];
      var newArry = [];
      for (var i in array) {
        for (var j in str) {
          if (array[i] == str[j].id) {
            newArry.push(str[j].name);
          }
        }
      }
      return newArry.toString();
    },
    time(val) {
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times = d.getFullYear() + "-" + month + "-" + day;
        return times;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.user_info {
  .btnS {
    background-color: #fff;
    padding: 10px;
  }
  .main {
    padding: 20px;
    .user {
      background-color: #fff;
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 20px;
    }
    .tab {
      margin-top: 30px;
      background-color: #fff;
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 20px;
      background-color: #f5f5f5;
      .btnY {
        margin: 6px;
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        font-weight: 700;
      }
      .btnN {
        margin: 6px;
        background-color: #eee;
      }
      .box {
        margin: 0 auto;
        margin-top: 20px;
        border: 1px solid #ccc;
        background-color: #fff;
        padding: 50px;
        border-radius: 5px;
      }
    }
  }
  .tab_sty {
    border-collapse: collapse;
    th {
      display: inline-block;
      width: 8%;
      height: 48px;
      line-height: 24px;
      padding: 10px;
      background-color: #fafafa;
      border: 1px solid rgb(217, 217, 217);
    }
    td {
      display: inline-block;
      width: 10%;
      height: 48px;
      line-height: 24px;
      padding: 10px;
      border: 1px solid rgb(217, 217, 217);
      text-align: left;
    }
  }
  .no_bdb {
    td {
      border-bottom: none;
    }
  }
}
</style>